<template>
	<v-scale-screen width="1920" height="1080" style="position: relative;background: #040f48;" :fullScreen="true">
		<div style="width: 1920px;height: 1080px;position: absolute;left: 0;top: 0;z-index: 9;background: #040f48;">
			<!-- vue3dLoader filePath="https://demo-1254184403.cos.ap-chengdu.myqcloud.com/20250306-2.glb"
				:cameraPosition="{ x: -1, y: 6, z: 5 }" :lights="lights" :backgroundColor="'#040f48'" :backgroundAlpha="0"
				outputEncoding="sRGB" :scale="scale" :labels="labels" style="width: 100%;" /> -->
			<!-- <vue3dLoader filePath="3d/20250310-2.glb" :cameraPosition="{ x: -1, y: 6, z: 5 }" :lights="lights"
				:backgroundColor="'#040f48'" :backgroundAlpha="0" outputEncoding="sRGB" :scale="scale" :labels="labels"
				style="width: 100%;" /> -->
			<test3dModel :monitorType="selectType" ref="test3dModel"></test3dModel>
		</div>

		<div style="text-align: center;color:#fff;font-size:42px;line-height: 80px;height: 264px;position: absolute;top: 0%;left: 0%;
							background-size:100% 100%;background-repeat: no-repeat;width: 100%;z-index: 99;"
			:style="{ 'background-image': 'url(' + publicPath + '/images/sIcon6.png)' }">宿迁中联超低排放驾驶舱</div>

		<div style="width: 450px;position: absolute;top: 60px;left: 30px;z-index: 99;">
			<dv-border-box-13 style="width:100%;height: 248px;padding-top: 26px;" backgroundColor="#041C62" class="point">
				<div @click="openUrl('/wasteGas/onlineSurveyPreview')">
					<div class="textCenter " style="background: #145DC3;margin: 0 30px 0 30px;line-height: 32px;">
						<div class="inset-box">实时环境监测</div>
					</div>

					<div
						style="color: #367FFF;padding:10px 0px 0 10px;overflow-x: auto;white-space: nowrap;width: calc(100% - 20px);">
						<div v-for="(item,index) in data1" :key="index" class="mr30 font14 point"
							@click.stop="outletId = item.outletId"
							style="display: inline-block;color: #5693FF;vertical-align:top"
							:class="[outletId == item.outletId?'selected':'']">
							<div style="padding-left: 20px;">{{item.outletName}}</div>
							<div style="padding-right: 20px;">
								<img src="../assets/sIcon169.png" v-if="outletId == item.outletId"
									style="width: 140%;height: 2px;" />
								<div v-else style="height: 12px;width: 140%;"></div>
							</div>
						</div>
					</div>

					<div v-for="(item, index) in data1" :key="index" v-if="outletId == item.outletId"
						style="color:#fff;overflow-x: auto;padding: 50px 0 20px 10px;white-space: nowrap;">
						<div v-for="(item2, index2) in item.pollutionList" :key="index2"
							style="margin-bottom: 8px;width:150px;text-align:center;display: inline-block;">
							<div style="margin-bottom:4px">
								<span style="font-size: 24px;" class="fontBold">{{ item2.actualAmount }}</span>
								<span style="font-size: 14px;">{{ item2.unitValue }}</span>
							</div>
							<div style="font-size:16px;color:#75E7FF">{{ item2.pollutionName }}</div>
						</div>
					</div>
				</div>
			</dv-border-box-13>

			<dv-border-box-7 style="width:calc(100% - 8px);height: 314px;margin: 10px 4px 0;"
				:color="['#1649A4', '#2882FF']" backgroundColor="#041C62">
				<div @click="openUrl('/wasteGas/onlineSurveyPreview')" class="point">
					<!-- <div class="titleText" style="padding: 21px 30px;">无组织排放</div> -->
					<div class="displayFlexBet" style="padding: 13px 20px;text-align: center;">
						<div style="flex: 1;height: 34px;" class="normal2 point"
							@click.stop="selectType2 = 'DISORGANIZED_OUTLET',getGasDisOrganizedMonitorDet(),getPollutionDayCharts()"
							:class="[selectType2 == 'DISORGANIZED_OUTLET'?'normalSelected2':'']">无组织排放</div>
						<div style="flex: 1;height: 34px;" class="normal2 point"
							@click.stop="selectType2 = 'ORGANIZED_OUTLET',getGasDisOrganizedMonitorDet(),getPollutionDayCharts()"
							:class="[selectType2 == 'ORGANIZED_OUTLET'?'normalSelected2':'']">有组织排放</div>
					</div>

					<div class="displayFlexBet" style="padding: 10px 20px 0;">
						<div style="flex: 1;padding-top: 16px;">
							<div style="margin-bottom: 3px;" class="colorfff">
								<span style="font-size: 24px;">{{data2.totalMonitorNum}}</span>
								<span style="font-size: 16px;">个</span>
							</div>
							<div style="font-size:14px;color:#75E7FF;">监测点位</div>
						</div>
						<div style="flex: 2" class="textCenter">
							<div style="position: relative;">
								<div>
									<img :src="publicPath + '/images/sIcon20.png'" style="width: 88px;height: 44px;" />
								</div>
								<div style="position: absolute;bottom: 5px;transform-origin: bottom center;left: 60px;"
									:style="{'transform':'rotate('+(data2.yearQualifiedPercent*1.8 - 90)+'deg)'}">
									<img src="../assets/sIcon174.png" style="width: 10px;height: 30px;" />
								</div>
							</div>
							<div style="color: #75E7FF;">
								<span>年度小时</span>
								<span style="color: #fff;" class="font24">{{data2.yearQualifiedPercent}}</span>
								<span style="color: #fff;">%</span>
								<span>达标</span>
							</div>
						</div>

						<div style="flex: 2" class="textCenter">
							<div style="position: relative;">
								<div>
									<img :src="publicPath + '/images/sIcon20.png'" style="width: 88px;height: 44px;" />
								</div>
								<div style="position: absolute;bottom: 5px;transform-origin: bottom center;left: 60px;"
									:style="{'transform':'rotate('+(data2.monthQualifiedPercent*1.8 - 90)+'deg)'}">
									<img src="../assets/sIcon174.png" style="width: 10px;height: 30px;" />
								</div>
							</div>
							<div style="color: #75E7FF;">
								<span>30天小时</span>
								<span style="color: #fff;" class="font24">{{data2.monthQualifiedPercent}}</span>
								<span style="color: #fff;">%</span>
								<span>达标</span>
							</div>
						</div>
					</div>
					<div id="categoryChart2" style="width: 100%;height: 100px;margin-top: 37px;"></div>
				</div>
			</dv-border-box-7>

			<div style=" width:100%;background-size:100% 100%;background-repeat: no-repeat;height: 234px;margin-top: 10px;"
				:style="{ 'background-image': 'url(' + publicPath + '/images/3.png)' }" class="point"
				@click="openUrl('/wasteGas/warningCenter')">
				<div style="padding: 21px 30px 10px;" class="displayFlex">
					<div class="warningTitle">
						<span>告警</span>
						<span>（{{data3.length}}）</span>
					</div>
					<div class="displayFlex" style="margin-left:110px">
						<div style="width: 3px;height: 12px;background: #FE0F47;"></div>
						<div class="colorfff font14 ml5">报警</div>
						<div style="width: 3px;height: 12px;background: #FFAE33;" class="ml20"></div>
						<div class="colorfff font14 ml5">预警</div>
					</div>
				</div>
				<div style="color:#fff;overflow-y: hidden;height: 170px;padding:0 30px;" class="swiper-container2">
					<div class="swiper-wrapper">
						<div v-for="(item, index) in data3" :key="index" class="swiper-slide">
							<div v-if="item.warningType == 'WARNING'" style="position: relative;" class="displayFlex mb5 ">
								<div
									style="width: 448px;line-height: 34px;background: #362F44;color: #fff;padding-left: 30px;position: relative;"
									class="textOver">
									<div>{{ item.shortProblemContent }}</div>
									<div
										style="width: 3px;height: 34px;background: #FFAE33;position: absolute;left: 0%;top: 0%;">
									</div>
								</div>
								<div style="width:150px;color: #75E7FF;font-size: 14px;" class="ml10">{{ item.dateDiffStr }}
								</div>
							</div>
							<div v-else style="position: relative;" class="displayFlex mb5">
								<div
									style="width: 448px;line-height: 34px;background: #360F48;color: #fff;padding-left: 30px;position: relative;"
									class="textOver">
									<div>{{ item.shortProblemContent }}</div>
									<div
										style="width: 3px;height: 34px;background: #FE0F47;position: absolute;left: 0%;top: 0%;">
									</div>
								</div>
								<div style="width:150px;color: #75E7FF;font-size: 14px;" class="ml10">{{ item.dateDiffStr }}
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div style=" width:102%;background-size:100% 100%;background-repeat: no-repeat;height: 184px;margin-left: -1%;"
				class="mt5 point" :style="{ 'background-image': 'url(' + publicPath + '/images/sIcon10.png)' }"
				@click="openUrl('/risk/riskPreview')">
				<div class="titleText" style="padding: 21px 30px;">AI巡检</div>
				<div style="color:#fff;padding-left: 30px;" class="displayFlexBet">
					<div id="main2" style="width: 110px;height: 108px;"></div>
					<div
						style="font-size: 12px;width: calc(100% - 130px);display: flex;flex-wrap: wrap;justify-content: space-between;">
						<div v-for="(item, index) in data6" :key="index"
							style="color:#fff;margin-bottom: 6px;font-size:16px;width: 50%;">
							<span>{{ item.title.split('（')[0] }}：</span>
							<span>{{ item.score }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="displayFlexBet" style="background-size:100% 100%;background-repeat: no-repeat;height: 115px;
				position: absolute;bottom: 3.2%;padding: 0 70px;width: 866px;left: 27.5%;z-index: 99;"
			:style="{'background-image': 'url(' + publicPath + '/images/sIcon11.png)'}">
			<div style="text-align:center;margin-top:-80px" class="point"
				@click="selectType = 'CEMS',$refs.test3dModel.itemClick('CEMS')">
				<img v-if="selectType == 'CEMS'" :src="publicPath + '/images/ssIcon1.png'"
					style="width:96px;height:94px"></img>
				<img v-else :src="publicPath + '/images/sIcon5.png'" style="width:96px;height:94px"></img>
				<div style="color:#367FFF;margin-top:13px;font-size:14px">有组织监测</div>
			</div>

			<div style="text-align:center;margin-top:-80px" class="point"
				@click="selectType = 'AIR_SITE',$refs.test3dModel.itemClick('AIR_SITE')">
				<img v-if="selectType == 'AIR_SITE'" :src="publicPath + '/images/ssIcon2.png'"
					style="width:96px;height:94px"></img>
				<img v-else :src="publicPath + '/images/sIcon3.png'" style="width:96px;height:94px"></img>
				<div style="color:#367FFF;margin-top:13px;font-size:14px">空气微站</div>
			</div>

			<div style="text-align:center;margin-top:-80px" class="point"
				@click="selectType = 'TSP',$refs.test3dModel.itemClick('TSP')">
				<img v-if="selectType == 'TSP'" :src="publicPath + '/images/ssIcon3.png'"
					style="width:96px;height:94px"></img>
				<img v-else :src="publicPath + '/images/sIcon2.png'" style="width:96px;height:94px"></img>

				<div style="color:#367FFF;margin-top:13px;font-size:14px">TSP</div>
			</div>

			<div style="text-align:center;margin-top:-80px" class="point"
				@click="selectType = 'SHJ',$refs.test3dModel.itemClick('SHJ')">
				<img v-if="selectType == 'SHJ'" :src="publicPath + '/images/ssIcon4.png'"
					style="width:96px;height:94px"></img>
				<img v-else :src="publicPath + '/images/sIcon4.png'" style="width:96px;height:94px"></img>

				<div style="color:#367FFF;margin-top:13px;font-size:14px">视频监控</div>
			</div>

			<div style="text-align:center;margin-top:-80px" class="point"
				@click="selectType = 'YJ',$refs.test3dModel.itemClick('YJ')">
				<img v-if="selectType == 'YJ'" :src="publicPath + '/images/ssIcon5.png'"
					style="width:96px;height:94px"></img>
				<img v-else :src="publicPath + '/images/sIcon1.png'" style="width:96px;height:94px"></img>
				<div style="color:#367FFF;margin-top:13px;font-size:14px">24小时预警</div>
			</div>
		</div>

		<div style="width: 450px;position: absolute;top: 60px;right: 30px;z-index: 99;">
			<dv-border-box-13 style="width:100%;height: 314px;transform: scaleX(-1)" backgroundColor="#041C62">
				<div style="transform: scaleX(-1);padding-top: 30px;" class="point" @click="openUrl('/produceManage/home')">

					<div class="textCenter " style="background: #145DC3;margin: 0 30px 0 30px;line-height: 32px;">
						<div class="inset-box2">生产总览</div>
					</div>

					<div style="color:#fff;overflow-y: auto;">
						<div class="displayFlexBet" style="padding: 0 15px 0 15px;">
							<div style="flex: 1;" class="textCenter">
								<div style="color:#fff;font-size:24px;font-weight: bold;margin:30px 0 15px">
									{{ data4.yearQty || 0 }}
								</div>
								<div style="font-size:17px">年度产量</div>
							</div>
							<div style="flex: 1;" class="textCenter">
								<div style="color:#fff;font-size:24px;font-weight: bold;margin:30px 0 15px">
									{{ data4.monthQty || 0 }}
								</div>
								<div style="font-size:17px">月度产量</div>
							</div>
						</div>
						<div ref="chart2" style="width:100%;height:134px"></div>
					</div>
				</div>

			</dv-border-box-13>

			<div style="width:100%;background-size:100% 100%;background-repeat: no-repeat;height: 204px;"
				:style="{ 'background-image': 'url(' + publicPath + '/images/sIcon13.png)' }" class="mt5 point"
				@click="openUrl('/videoMonitor/video')">
				<div class="displayFlexBet" style="padding: 20px 30px;">
					<div class="titleText">视频监控</div>
					<!-- <div style="color:#fff;font-size: 14px;">{{data8.length?2:0}}/{{data8.length}}</div> -->
				</div>

				<div style="position: relative;overflow-x: hidden;padding:0 0 0 30px;width: calc(100% - 30px);"
					class="swiper-container">
					<div style="color:#fff;display: flex;" class="swiper-wrapper">
						<div v-for="(item,index) in data8" style="width: 160px;" class="mr25 swiper-slide">
							<img :src="imgUrl + item.coverFileId" style="width:160px;height: 90px;" />
							<div style="color: #75E7FF;font-size: 14px;margin-top: 6px;">{{item.equipmentPosition}}</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width:100%;background-size:100% 100%;background-repeat: no-repeat;height: 252px;"
				:style="{ 'background-image': 'url(' + publicPath + '/images/sIcon14.png)' }" class="mt5 point"
				@click="openUrl('/cleanTransportation/transportDashboard')">
				<div class="titleText" style="padding: 20px 30px 10px;">清洁运输</div>
				<div style="color:#fff;position: relative;">
					<div id="main" style="width:100%;height:88px;padding:0 30px;"></div>
					<div class="mt20 ml20" style="color: #fff;background-size:100% 100%;background-repeat: no-repeat;position: relative;
											height: 79px;width: 247px;" :style="{ 'background-image': 'url(' + publicPath + '/images/sIcon15.png)' }">
						<div style="font-size: 18px;position: absolute;top: 35px;right: 70px;">{{ data5.totalNum }}</div>
						<div style="font-size: 18px;position: absolute;top: 0px;right: 70px;color: #75E7FF;" class="font14">
							进出场车次</div>
					</div>
				</div>
			</div>

			<div style="width:100%;background-size:100% 100%;background-repeat: no-repeat;height:220px"
				:style="{ 'background-image': 'url(' + publicPath + '/images/sIcon14.png)' }" class="mt5">
				<div class="titleText" style="padding: 20px 30px;">碳标签</div>
				<div style="color:#fff;display:flex;padding-left:30px">
					<div class="textCenter">
						<div>
							<img src="../assets/sIcon171.png" style="width: 76px;height: 88px;" />
						</div>
						<div class="colorfff">
							<span class="font20">{{total.toFixed(2)}}</span>
							<span class="font14">kg</span>
						</div>
					</div>
					<div style="width: calc(100% - 86px);height: 140px;overflow-y: hidden;" class="swiper-container3">
						<div class="swiper-wrapper">
							<div v-for="(item,index) in data7" :key="index" class="displayFlexBet mb20 swiper-slide">
								<div style="width: 80px;text-align: right;">{{item.name}}</div>
								<div style="width: calc(100% - 100px);">
									<div class="displayFlex">
										<el-progress style="width: 64%;" :showText="false" :percentage="item.per"
											strokeLinecap="square" textColor="#75E7FF" :stroke-width="8"
											defineBackColor="#1E3372"></el-progress>
										<span class="ml10 font14" style="color:#75E7FF;">{{item.per}}%</span>
									</div>
									<div class="colorfff">
										<span class="font14">{{item.cQty}}</span>
										<span class="font10">kg</span>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

		</div>

		<!-- </AutoScalContainer> -->
	</v-scale-screen>
</template>

<script>
	import elProgress from '@/components/progress'
	import Swiper from 'swiper'; // 注意引入的是Swiper
	import 'swiper/css/swiper.min.css' // 注意这里的引入

	let that
	// import {
	// 	vue3dLoader
	// } from "vue-3d-loader";
	import test3dModel from '@/components/test3dModel';
	import * as echarts from 'echarts';

	export default {
		components: {
			//vue3dLoader,
			elProgress,
			test3dModel
		},
		data() {
			return {
				outletId: '',
				outletList: [],
				selectType: 'CEMS',
				selectType2: 'DISORGANIZED_OUTLET',
				data1: [],
				data2: {},
				data3: [],
				data4: {},
				data5: {},
				data6: {},
				data7: {},
				data8: [],
				data9: [],
				publicPath: 'https://demo-1254184403.cos.ap-chengdu.myqcloud.com',
				imgUrl: "https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=",
				lights: [{
					type: "AmbientLight",
					color: "#fff",
					intensity: 2,
				}],
				scale: [
					[{
						x: 800,
						y: 800,
						z: 800
					}]
				],
				labels: [{
					image: "https://demo-1254184403.cos.ap-chengdu.myqcloud.com/images/dizuo.png ",
					position: {
						x: -0.5,
						y: 0.15,
						z: 0
					},
					scale: {
						x: 0.1,
						y: 0.3,
						z: 0.4
					},
					sid: 1, // custom id
				}, {
					text: "厂界（西南）",
					position: {
						x: 0.1,
						y: -0.05,
						z: 0
					},
					scale: {
						x: 1.5,
						y: 0.8,
						z: 0
					},
					textStyle: {
						fontFamily: "Arial",
						fontSize: 10,
						fontWeight: 600,
						lineHeight: 1,
						color: "#ffffff",
						borderWidth: 1,
						borderRadius: 0,
						borderColor: "#75E7FF",
						backgroundColor: "#031F5F",
					},
					sid: 2, // 自定义标识，可有可无
				}],
				total: 0,
			}
		},
		mounted() {
			that = this

			that.getGasDisOrganizedMonitorDet()
			that.getGasWarningList()
			that.getProductQtyData()
			that.countCleanTransportationDoor()
			that.countCompleteData()
			that.getGasRiskList()
			that.getListByEntId()
			that.getPollutionDayCharts()
			that.getGasOnlineLatestMonitorByOutletIdV2()
		},
		methods: {
			openUrl(url) {
				console.log(url)
				if (process.env.NODE_ENV === 'production') {
					window.open('http://bbep.cc/#' + url);
				} else {
					window.open('http://localhost:9999/#' + url);
				}
			},

			getPollutionDayCharts() {
				that.ajax({
					url: 'oneMap/getPollutionDayCharts',
					data: {
						outletApproach: that.selectType2 // 固定值，有组织排放
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						let data1 = []
						let data2 = []
						let data3 = []
						if (res.data && res.data.length) {
							for (let item of res.data[0].dataList) {
								data1.push(item.dateStr)
							}
							let colors = ["#00FF2A", "#FFC000", "#53399D"]
							for (let index in res.data) {
								let item = res.data[index]
								data3.push(item.pollutionName)
								data2[index] = {
									name: item.pollutionName,
									data: [],
									type: 'line',
									smooth: true,
									showSymbol: false,
									lineStyle: {
										color: colors[index] // 设置线的颜色为红色
									}
								}
								for (let item2 of item.dataList) {
									data2[index].data.push(item2.totalAmount)
								}
							}
						}
						//console.log(data3)
						var chartDom = document.getElementById('categoryChart2');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data: data3,
								x: 'right',
								textStyle: {
									color: '#ffffff' //字体颜色
								},
							},
							title: {
								text: '日平均排放趋势',
								textStyle: { // 标题美化
									color: '#75E7FF',
									fontSize: 14,
								}
							},
							xAxis: {
								type: 'category',
								data: data1,
								axisLabel: {
									fontSize: 13 //设置坐标轴文本标签的字体大小
								},
								axisLine: { //坐标轴轴线
									show: false,
									lineStyle: {
										color: '#367FFF' // 设置为红色
									}
								},
								axisTick: { //坐标轴刻度
									show: false
								}
							},
							grid: {
								left: 20, // 左侧内边距
								right: 20, // 右侧内边距
								top: 27, // 顶部内边距
								bottom: 20 // 底部内边距
							},
							yAxis: {
								type: 'value',
								splitLine: { //坐标轴在grid区域中的分割线
									show: false
								},
								axisLabel: { //坐标轴刻度标签
									show: false
								},
							},
							series: data2
						};
						myChart.clear(); //清空
						option && myChart.setOption(option);
					}
				})
			},

			getGasOnlineLatestMonitorByOutletIdV2() {
				that.ajax({
					url: 'oneMap/getActualGasMonitorDet',
					data: {
						outletId: that.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						let thisData = result.data

						if (!that.outletId) that.outletId = thisData[0].outletId
						that.data1 = thisData
					}
				})
			},

			countCompleteData() {
				that.ajax({
					url: 'oneMap/getMaterialCQtyList',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {

						that.total = res.data.reduce((accumulator, currentItem) => accumulator + currentItem.cQty,
							0);
						for (let item of res.data) {
							item.per = Number(((item.cQty / that.total) * 100).toFixed(2))
						}
						that.data7 = res.data

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container3', {
								direction: 'vertical',
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},

								slidesPerView: 3, // 一组三个
								spaceBetween: 25,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
						console.log("碳标签", that.data7)
					}
				})
			},

			countCleanTransportationDoor() {
				that.ajax({
					url: 'oneMap/countCleanTransportationDoor',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {

						that.data5 = res.data

						for (let item of res.data.list) {
							item.name = item.name
							item.value = item.num
						}
						//console.log("清洁运输", that.data5)

						var chartDom = document.getElementById('main');
						var myChart = echarts.init(chartDom);
						var option;

						option = {
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 10,
								top: 20,
								bottom: 20,
								textStyle: {
									color: '#fff' // 这里设置图例文字的颜色为红色
								},
								formatter(name) {
									let info = res.data.list.find((item) => item.name == name);

									return `${name}\r${info.value}`;
								},
							},

							series: [{
								name: '',
								type: 'pie',
								center: ['75%', '50%'],
								radius: ['50%', '90%'],
								label: {
									show: false,
									position: 'center'
								},
								labelLine: {
									show: false
								},
								data: res.data.list,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}],

							graphic: {
								type: 'text', // 使用文本组件
								right: '80px',
								top: 'center', // 文本位置，这里设置为居中
								style: {
									text: that.data5.percent + '%', // 显示的文本内容，可以根据需要动态设置
									textAlign: 'center', // 文本对齐方式
									fill: '#fff' // 文本颜色
								}
							}
						};

						option && myChart.setOption(option);

					},
				})
			},

			getProductQtyData() {
				that.ajax({
					url: 'oneMap/getProductQtyData',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {

						if (!res.data) return false
						that.data4 = res.data
						console.log("生产总览", that.data4)

						let xAxisData = []
						let seriesData = []
						for (let item of res.data.monthList) {
							xAxisData.push(item.monthStr)
							seriesData.push(item.qty)
						}

						const chartInstance = echarts.init(that.$refs.chart2);
						const option = {
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								data: xAxisData,
								axisLabel: {
									fontSize: 13 //设置坐标轴文本标签的字体大小
								},
								axisLine: { //坐标轴轴线
									show: false,
									lineStyle: {
										color: '#367FFF' // 设置为红色
									}
								},
								axisTick: { //坐标轴刻度
									show: false
								}
							},
							grid: {
								left: 20, // 左侧内边距
								right: 20, // 右侧内边距
								top: 20, // 顶部内边距
								bottom: 20 // 底部内边距
							},
							yAxis: {
								type: 'value',
								splitLine: { //坐标轴在grid区域中的分割线
									show: false
								},
								axisLabel: { //坐标轴刻度标签
									show: false
								},
							},
							series: [{
								data: seriesData,
								type: 'line',
								smooth: false,
								symbol: "none",
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#FF355A' // 渐变起始颜色
									}, {
										offset: 1,
										color: '#041452' // 渐变结束颜色
									}])
								},
								lineStyle: {
									color: '#FF355A', // 折线颜色
									width: 1, // 折线宽度
								}

							}]
						};
						chartInstance.setOption(option);
					}
				});
			},

			getGasRiskList() {
				that.ajax({
					url: 'oneMap/getAiInspect',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {

						let dataList = result.data
						let newDataList = []
						for (let key in dataList) {
							let thisItem = {
								title: '',
								score: 0
							}
							if (key == 'disorganizedScore') {
								thisItem.title = '无组织排放'
								thisItem.score = dataList[key]
							}
							if (key == 'docScore') {
								thisItem.title = '环保制度'
								thisItem.score = dataList[key]
							}
							if (key == 'stdBookScore') {
								thisItem.title = '环境台账'
								thisItem.score = dataList[key]
							}
							if (key == 'cleanTranScore') {
								thisItem.title = '清洁运输'
								thisItem.score = dataList[key]
							}
							if (key == 'machineScore') {
								thisItem.title = '处置设备运行'
								thisItem.score = dataList[key]
							}
							if (key == 'organizedScore') {
								thisItem.title = '有组织排放'
								thisItem.score = dataList[key]
							}
							newDataList.push(thisItem)
						}
						that.data6 = newDataList
						console.log("AI巡检", that.data6)

						let chartDom = document.getElementById("main2");
						let myChart = echarts.init(chartDom);
						let option;
						let names = []
						let datas = []
						let legendData = []

						for (let item of newDataList) {
							//console.log(item)
							legendData.push(item.title)
							names.push({
								name: '',
								max: 5
							})
							datas.push(item.score)
						}

						option = {
							legend: {
								show: true,
								data: legendData
							},
							radar: {
								indicator: names,
								center: ['45%', '50%'],
								radius: '100%', // 半径
								splitArea: {
									//分隔区域
									show: true, // 是否显示分隔区域, 默认true
									areaStyle: {
										// 分隔区域的样式 (淡蓝色)
										color: '#296197'
									}
								},

								splitLine: {
									//分隔线
									show: false, //默认数值轴显示，类目轴不显示
									lineStyle: {
										// 分隔线的样式 (淡蓝色)
										color: 'rgba(255, 0, 255, 0.2)'
									}
								},
							},
							series: [{
								name: '',
								type: 'radar',

								data: [{
									value: datas,
									name: 'name',
									areaStyle: {
										color: "#fff"
									},
									label: {
										show: true,
										formatter: function(params) {
											return params.value;
										}
									}
								}]
							}]
						};

						option && myChart.setOption(option);
					}
				})
			},

			getListByEntId() {
				that.ajax({
					url: 'video/monitor/equipment/getListByEntId',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.data8 = result.data

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container', {
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},
								slidesPerView: 2.3, // 一组三个
								spaceBetween: 20,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
					}
				})
			},


			getGasDisOrganizedMonitorDet() {
				that.ajax({
					url: 'oneMap/getGasMonitorDet',
					data: {
						outletApproach: that.selectType2
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.data2 = result.data
					},
				})
			},

			getGasWarningList() {
				that.ajax({
					url: 'oneMap/getGasWarningList',
					data: {},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.data3 = result.data

						setTimeout(function() {
							var swiperInstance = new Swiper('.swiper-container2', {
								direction: 'vertical',
								loop: true, // 无缝
								autoplay: { //自动开始
									delay: 2500, //时间间隔
									disableOnInteraction: false, //*手动操作轮播图后不会暂停*
								},

								slidesPerView: 4, // 一组三个
								spaceBetween: 25,
								paginationClickable: true,
								// navigation: {
								// 	nextEl: '.swiper-button-next',
								// 	prevEl: '.swiper-button-prev',
								// },
								// 窗口变化,重新init,针对F11全屏和放大缩小,必须加
								observer: true,
								observeParents: true,
								lazy: {
									loadPrevNext: true,
								},
							})
						}, 100)
					},
				})
			},

		},
	}
</script>

<style scoped>
	>>>.el-progress-bar__inner {
		background: #8DE5A8 !important;
	}

	>>>.el-progress-bar__outer {
		border-radius: 0px !important;
	}

	.warningTitle {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.normal2 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 16px;
		color: #5794FF;
		line-height: 34px;
	}

	.normalSelected2 {
		background: #75E7FF !important;
		color: #040F48 !important;
		font-weight: bold;
	}

	.inset-box2 {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		text-shadow: 0px 10px 30px #000000;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		position: relative;
	}

	.inset-box2::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		left: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}

	.inset-box {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		text-shadow: 0px 10px 30px #000000;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		position: relative;
	}

	.inset-box::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		right: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}

	.go-preview {
		height: 100%;
		width: 100%;
	}

	.selected {
		color: #fff !important;
		font-weight: bold;
	}

	.titleText {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.chartItem {
		z-index: 13;
		top: 54px;
		display: block;
		width: 450px;
		padding: 8px
	}

	::-webkit-scrollbar {
		width: 0px;
		height: 0px;
	}

	:hover::-webkit-scrollbar {
		width: 7px;
		height: 7px;
		background-color: #9093994d;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		background-color: #fff;
		opacity: 0.1;
		width: 0px;
		display: none;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 8px;
		background-color: #9093994d;
	}
</style>

<style>
	@keyframes slideShow {
		0% {
			transform: translateX(0);
		}

		/* 开始时图片不动 */
		25% {
			transform: translateX(-190px);
		}

		/* 移动到第二张图片 */
		50% {
			transform: translateX(-380px);
		}

		/* 停留 */
		75% {
			transform: translateX(-790px);
		}

		/* 移动到第三张图片 */
		100% {
			transform: translateX(-980px);
		}

		/* 停留最后一张图 */
	}
</style>